<template>
  <div>
    <Header1 :activeIndex=5></Header1>

    <div class="newsCenterPanel">
      <div class="title">
        <a href="#" target="_self">最新新闻</a>
      </div>
      <div class="newsCenterPanel_inner"  v-for="item in pageInfo.list" :key="item">
        <div class="newContentBox" v-loading="loading">
          <a hidefocus="true" @click="NewsDetail(item.newsId)">
            <div class="time">
              <p class="day">{{getDay(item.createTime)}}</p>
              <p class="ym">{{getYear(item.createTime)}}-{{getMonth(item.createTime)}}</p>
            </div>
            <div class="newTitle">{{item.newsTitle}}</div>

            <div class="newTitleIcon"></div>
            <div class="border"></div>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getDay,getYear,getMonth} from "../../common/js/dateformat";
  import Header1 from "../header/Header"
  export default {
    name: "news-list",
    components:{
      Header1,
    },
    data(){
      return {
        loading:false,
        pageIndex:1,
        pageInfo:{},
        news:{
          newsTitle:'',
          createPerson:'',
        }
      }
    },
    created(){
      this.getNews();
    },
    methods:{
      getNews(){
        this.loading=true;
        this.$ajax.post(this.$config.url + `news/selJobfaircompanyByUser/${this.pageIndex}`,this.news
        ).then(res => {
          this.pageInfo = res.data;
          this.loading = false;
        }).finally(() => {
        })
      },
      NewsDetail(newsId) {
        this.$ajax.post(this.$config.url + `news/addNewsLookNum`, {
          "newsId": newsId
        }).then(() => {
          this.$router.push({
            path: '/UserNewsDetail',
            query: {newsId: newsId}
          })
        })
      },
      getYear(date){
        return getYear(date)
      },
      getMonth(date){
        return getMonth(date);
      },
      getDay(date){
        return getDay(date);
      }
    },
  }
</script>

<style scoped>
  *{padding: 0;margin: 0;font-family: "微软雅黑";}
  ul{list-style: none;}
  a{text-decoration: none;}
  .newsCenterPanel{width: 100%; background: #fff; overflow: hidden; *padding-bottom: 50px}
  .newsCenterPanel .title{position: relative; width: 410px; height: 85px; line-height: 85px; margin: 35px auto 30px auto; font-size: 28px; font-weight: normal; padding-top: 10px}
  .newsCenterPanel .title a{display: block; width: 100%; color: #2e2e30; text-align: center;}
  .newsCenterPanel_inner{width: 1200px; margin: 0 auto}
  .newsCenterPanel_inner .newContentBox{margin-right: 40px;float: left; width: 550px; height: 138px; text-align: left; vertical-align: top; position: relative}
  /*.newsCenterPanel_inner .newContentBox.odd{margin-right: 100px}*/
  .newsCenterPanel_inner .newContentBox a{cursor: pointer}
  .newsCenterPanel_inner .newContentBox .newTitle{margin-top:20px;float: left; line-height: 44px; height: 50px; font-size: 18px; color: #333; width: 400px; white-space: nowrap; word-break: normal; overflow: hidden; text-overflow: ellipsis}
  .newsCenterPanel_inner .newContentBox a:hover .newTitleIcon{background-color: #019875}
  .newsCenterPanel_inner .newContentBox .newTitleIcon{width: 19px; height: 19px;  background-color: #a6a6a6; position: absolute; right: 0; top: 24px}
  .newsCenterPanel_inner .newContentBox .border{margin-top:20px;position: absolute; left: 87px; top: 44px; width: 401px; border-top: 1px solid #019875}
  .newContentBox .time{width: 54px; height: 54px; border: 1px solid #019875; background: #fff; text-align: center; margin-right: 30px; margin-top: 14px; float: left}
  .newContentBox .time .day{font-size: 20px; color: #019875; padding: 6px 0 0 0}
  .newContentBox .time .ym{font-size: 12px; color: #019875}
  .newContentBox a:hover .time{background: #019875}
  .newContentBox a:hover .day{color: #fff}
  .newContentBox a:hover .ym{color: #fff}
</style>